<template>
  <section class="home-wrap">
    <!-- 页面顶部nav菜单 -->
    <home-nav @cateChange="cateChange"/>
    <!-- 骨架屏 -->
    <vue-skeleton :row="6" :loading="firstLoading"/>
    <!-- 数据列表 -->
    <div class="joke-data-wrap" v-show="!firstLoading">
      <joke-item :list="jokeData" @loadMoreList="loadMoreList"/>
    </div>

    <to-top :isShowTop="isShowTop"/>

    <!-- 页面底部导航 -->
    <tabbar-com tabbar-name="home"/>
  </section>
</template>

<script lang="ts">
  import {Component, Vue} from "vue-property-decorator";
  import TabbarCom from "@/components/tabbar.vue";
  import JokeItem from "./homeInclude/jokeItem.vue";
  import HomeNav from "./homeInclude/homeNav.vue";
  import toTop from "@/components/toTop.vue";

  @Component({
    components: {
      TabbarCom,
      HomeNav,
      JokeItem,
      toTop
    }
  })
  export default class Home extends Vue {
    private firstLoading: boolean = true; // 页面加载中

    private isShowTop: boolean = false; // 回顶部

    private jokeData: object[] = []; // 段子列表数据数组
    private pageNum: number = 1; // 段子列表数据数组

    /*
     段子分类:
      cateType=1 : 全部
      cateType=2 : 文字
      cateType=3 : 图片
      cateType=4 : 视频
    */
    private cateType: number = 1;

    mounted() {
      this.getJokeData(true);

      // 监听页面滚动距离
      window.addEventListener("scroll", () => {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        this.isShowTop = scrollTop > 800;
      });

    }

    // 请求数据方法
    getJokeData(showSkeleton: boolean = false) {
      if (showSkeleton) {
        this.firstLoading = true;
      }
      this.$api.get("/satinApi", {type: this.cateType, page: this.pageNum++})
        .then((res: any) => {
          if (res && res.length) {
            this.jokeData = this.jokeData.concat(res);
          }
        })
        .catch((e: any) => this.$toast(e.msg))
        .finally(() => {
          this.firstLoading = false;
        });
    }

    // 加载更多段子数据
    loadMoreList() {
      this.getJokeData();
    }

    // 段子分类切换
    cateChange(id: number) {
      this.cateType = id;
      this.pageNum = 1;
      this.jokeData = [];
      this.getJokeData(true);
    }

  }
</script>
<style lang="scss">
  .home-wrap{
    padding-bottom: 50px;
  }
  .joke-data-wrap {
    padding-top: 44px;
  }
</style>

